
<template>
  <div class="notice-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="公告内容">
        <el-input 
          v-model="data.text" 
          placeholder="请输入公告内容"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="文字颜色">
        <el-color-picker v-model="data.textColor" />
      </el-form-item>

      <el-form-item label="字体大小">
        <el-slider 
          v-model="data.fontSize" 
          :min="12" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="字体粗细">
        <el-radio-group v-model="data.fontWeight">
          <el-radio label="normal">正常</el-radio>
          <el-radio label="bold">加粗</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="图标设置">
        <div class="icon-settings">
          <el-select v-model="data.iconType" placeholder="请选择图标类型">
            <el-option 
              v-for="icon in iconOptions" 
              :key="icon.value" 
              :label="icon.label" 
              :value="icon.value"
            />
          </el-select>

          <el-color-picker v-model="data.iconColor" />

          <el-slider 
            v-model="data.iconSize" 
            :min="12" 
            :max="24" 
            show-input 
            input-size="small"
          />
        </div>
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="内边距">
        <el-slider 
          v-model="data.padding" 
          :min="5" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup>
import { Bell, Warning, InfoFilled, CircleCheckFilled } from '@element-plus/icons-vue'
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// 图标选项
const iconOptions = [
  { label: '铃铛', value: 'bell' },
  { label: '警告', value: 'warning' },
  { label: '通知', value: 'notification' }, // 通知
  { label: '消息', value: 'message' }, // 消息
  { label: '红旗', value: 'flag' }, // 用于重要公告标记
]

// 根据类型获取图标组件
const iconMap = {
  bell: Bell,
  warning: Warning,
  info: InfoFilled,
  success: CircleCheckFilled
}

// 当前图标
const currentIcon = computed(() => {
  return iconMap[props.data.iconType] || Bell
})
</script>

<style lang="scss" scoped>
.notice-panel {
  padding: 10px;

  .icon-settings {
    display: flex;
    align-items: center;
    gap: 10px;

    .el-select {
      width: 120px;
    }
  }
}
</style>
